<template>
  <div class="app-container">
    <!-- vxe检索数据组件 -->
    <search-form
      ref="searchForm"
      :formSearchData.sync="formSearchData"
      :alysCodeOptions="alysCodeOptions"
      @initTableColsEmit="initTableCols"
      @resetSearchEventEmit="resetSearchEventEmit"
      @searchEventEmit="searchEventEmit"
    >
    </search-form>

    <!-- 表格组件 -->
    <ex-base-table
      ref="exBaseTable"
      :loading.sync="loading"
      :tableColumn="tableColumn"
      :tableData="tableData"
      :isVxeHandleS="false"
      :isVxeCheckbox="false"
      :isHandleCreate="false"
      :isVxeColSeq="false"
    >
      <!-- 表格工具组扩展插槽 -->
      <template v-slot:vxeToolbarExtend>
        <template v-if="formSearchData.alys_code">
          <!--
          on-preview	点击文件列表中已上传的文件时的钩子
          on-remove	文件列表移除文件时的钩子
          before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
          on-exceed	文件超出个数限制时的钩子
          on-success	文件上传成功时的钩子	function(response, file, fileList)
          on-error	文件上传失败时的钩子	function(err, file, fileList)
         -->
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="handleSuccess"
            :on-error="handleError"
            :headers="uploadHeaders"
            :data="formSearchData"
            accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          >
            <el-button size="mini" icon="el-icon-document-add">导入</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>

          <el-button
            size="mini"
            icon="el-icon-export"
            @click="handlePushExportUrl"
            >导出</el-button
          >
          <el-button
            size="mini"
            icon="el-icon-export"
            @click="handlePushExportUrlTemp"
            >导出模板</el-button
          >
        </template>
      </template>
    </ex-base-table>

    <!-- 分页组件 -->
    <Pagination
      v-show="tablePage.totalResult > 0"
      :limit.sync="tablePage.pageSize"
      :page.sync="tablePage.currentPage"
      :total="tablePage.totalResult"
      @pagination="pageFindList"
    />

    <!-- 表单提价组件 -->
    <!-- <submit-form
      ref="submitForm"
      :dialogFormVisible.sync="dialogFormVisible"
      :dialogStatus="dialogStatus"
      :formSubmitData="formSubmitData"
      :lpOptions="lpOptions"
      @handleFromCreateDataEmit="handleFromCreateDataEmit"
      @handleFromUpdateDataEmit="handleFromUpdateDataEmit"
      @resetFormDataEmit="resetFormSubmitData"
    >
    </submit-form> -->
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'
import store from "@/store";
import { getToken } from "@/utils/auth";

import XEUtils from "xe-utils";
import {
  findSingleTableTemplate,
  templatelist,
  templatedatelist,
} from "./service/baseApi";

// import{fetchList}from '@/views/SystemParams/SystemParam/service/baseApi.js'
// 基础表格组件
import ExBaseTable from "@/components/VxeTable/ExBaseTable";
// 分页
import Pagination from "@/components/Pagination";
// 文章表单
// import SubmitForm from './components/SubmitForm'
// 检索表单
import SearchForm from "./components/SearchForm";
//信息提示框
// import resetFormSubmitData from '@/views/mixins/resetFormSubmitData'

export default {
  name: "vxe-basetable",
  mixins: [],
  components: {
    ExBaseTable,
    Pagination,
    // SubmitForm,
    SearchForm,
  },
  // 定义属性
  data() {
    const XEUtilsLocat = XEUtils.locat();
    const hostName = XEUtilsLocat.hostname;
    const protocol = XEUtilsLocat.protocol;

    return {
      /* 上传 */
      uploadHeaders: {},
      uploadUrl: `${protocol}//${hostName}:7001/${process.env.VUE_APP_DATA_IO_URI_PARAM}/Template/upfile`,

      // 检索条件
      formSearchData: {
        alys_code: "",
      },
      alysCodeOptions: [],
      // 排除条件
      sortField: "",
      sortFlag: "",

      /* 表单相关 */
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: "",
      // 表单数据对象
      formSubmitData: {
        id: "",
        flag: "",
        flag_name: "",
        code: "",
        name: "",
        remark: "",
      },
      initFormSubmitData: {
        id: "",
        flag: "",
        flag_name: "",
        code: "",
        name: "",
        remark: "",
      },
      lpOptions: [],
      /* 分页相关 */
      tablePage: {
        currentPage: 1, //当前页
        pageSize: 10, // 每一页页数
        totalResult: 0,
      },
      /* 表格相关 */
      tableColumn: [], // 表格字段
      loading: false, //表格loading特效
      tableData: [], //表格数据
      uploadLoading: "",
    }; //data-end
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    /* API数据操作相关 */
    // 检索模板查询
    findfindSingleTableTemplate() {
      findSingleTableTemplate().then(({ data }) => {
        this.alysCodeOptions = XEUtils.map(data.rows, (item) => {
          return {
            label: item.alys_name,
            value: item.alys_code,
          };
        });
      });
    },
    // 获取模板表头
    async findtemplatelist(alys_code) {
      return await templatelist({
        alys_code,
      });
    },
    // 获取模板数据
    // findtemplatedatelist(){
    //   templatedatelist().then(({data}) => {
    //     // this.alysCodeOptions = XEUtils.map(data.rows, (item) => {
    //     //   return {
    //     //     label: item.alys_name,
    //     //     key: item.alys_code
    //     //   }
    //     // })
    //   })
    // },

    // 查询数据
    findList() {
      this.loading = true;
      // 请求表格数据
      templatedatelist({
        page: this.tablePage.currentPage, // 当前页
        pageSize: this.tablePage.pageSize, // 每页条数
        sortField: this.sortField,
        sortFlag: this.sortFlag,
        ...this.formSearchData, //检索条件
      }).then(({ data }) => {
        // 给表格数据赋值
        this.tableData = data.rows;
        // 给分页总数赋值
        // this.tablePage.totalResult = data.total
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false;
        }, 0.5 * 1000);
      });
    },
    pageFindList() {
      this.findList();
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols(nVal) {
      this.tableData = [];
      this.findtemplatelist(nVal).then(({ data }) => {
        console.log(data);
        this.tableColumn = XEUtils.map(data.rows, (item) => {
          return {
            field: item.field_name,
            title: item.field_meaning,
            // width:300
          };
        });
      });
      // const tabCols = [  //动态增加的字段 传进来的
      //   {field: 'flag', title: '字典标识', width: 200},
      //   {field: 'flag_name', title: '字典名称', width: 300},
      //   {field: 'code', title: '字典对照码', width: 200, sortable: true},
      //   {field: 'name', title: '字段对照名称', width: 200, showOverflow: true},
      //   {field: 'remark', title: '备注', width: 300}
      // ]
      // this.tableColumn = tabCols;
    },

    // 表格工具组-多选删除
    // handleRemoveEmit(selectRecords) {
    //   // this.$refs.exBaseTable.$refs.xTable.removeCheckboxRow()
    //   delManySystemParam({
    //     ...selectRecords
    //   }).then(({data}) => {
    //     this.findList()
    //     setTimeout(() => {
    //       this.loading = false
    //     }, 0.5 * 1000)
    //   })
    // },
    // 表格工具组-新增表单弹窗（需要表单组件）
    // handleCreateEmit(type) {
    //   // 重置表单内容
    //   this.resetFormSubmitData()
    //   this.dialogStatus = type
    //   this.dialogFormVisible = true
    //   this.$nextTick(() => {
    //     this.$refs.submitForm.$refs['dataForm'].clearValidate()
    //   })
    // },
    // // 行内按钮-修改数据弹窗（需要表单组件）
    // handleUpdateEmit(row, type) {
    //   this.formSubmitData = Object.assign({}, row) // copy obj
    //   this.dialogStatus = type
    //   this.dialogFormVisible = true
    //   this.$nextTick(() => {
    //     this.$refs.submitForm.$refs['dataForm'].clearValidate()
    //   })
    // },
    // 单行删除
    // handleRmoveColEmit(row) {
    //   // this.$refs.exBaseTable.$refs.xTable.remove(row)
    //   delSystemParam({
    //     id: row.id
    //   }).then(({data}) => {
    //     this.findList()
    //     // 关闭加载特效
    //     setTimeout(() => {
    //       this.loading = false
    //     }, 0.5 * 1000)
    //   })
    // },

    /* 表单组件相关 */
    // 更新
    // handleFromUpdateDataEmit() {
    //   updateSystemParam({
    //     ...this.formSubmitData,  //检索条件
    //   }).then(({data}) => {
    //     this.findList()
    //     // 关闭加载特效
    //     setTimeout(() => {
    //       this.loading = false
    //     }, 0.5 * 1000)
    //   })
    // },

    // // 增加
    // handleFromCreateDataEmit() {
    //   addSystemParam({
    //     ...this.formSubmitData,  //检索条件
    //   }).then(({data}) => {
    //     this.findList()
    //     // 关闭加载特效
    //     setTimeout(() => {
    //       this.loading = false
    //     }, 0.5 * 1000)
    //   })
    // },

    /* 检索相关 */
    // 检索
    searchEventEmit() {
      console.log();
      if (this.formSearchData.alys_code) {
        this.tablePage.currentPage = 1;
        this.findList();
      } else {
        this.$message({
          message: "请先选择模板！",
          type: "warning",
        });
      }
    },
    // 重置
    resetSearchEventEmit() {
      // 重置代码...
      this.tablePage.currentPage = 1;
      this.findList();
    },
    /* 排序 */
    customSortMethodEmit(property, order) {
      this.sortField = property;
      this.sortFlag = order;
      this.findList();
    },

    /* 导入：文件上传钩子 */
    // 文件上传成功
    /* 上传文件之前的钩子 */
    beforeAvatarUpload(file) {
      this.uploadLoading = this.$loading({
        lock: true,
        text: "正在上传中！",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 200;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 200MB!');
      // }
      // return isJPG && isLt2M;
    },
    handleSuccess(response, file, fileList) {
      console.log("11111111111111111111111");
      this.uploadLoading.close();
      if (response.err_code === "20000") {
        //导入成功
        this.$message({
          message: "导入成功",
          type: "success",
        });
      } else if (response.err_code === "20001") {
        //曲线名称错误
        this.$message.error("新增的数据代码重复");
      } else if (response.err_code === "20002") {
        //导入数据错误
        this.$message.error("导入文件和模板不符合");
      } else if (response.err_code === "30000") {
        //导入失败
        this.$message.error("导入失败");
      }
    },
    /* 上传失败 */
    handleError(err, file, fileList) {
      this.uploadLoading.close();
      this.$message({
        message: "上传失败error",
        type: "error",
      });
    },

    /* 导出 url */
    handlePushExportUrl() {
      const XEUtilsLocat = XEUtils.locat();
      const hostName = XEUtilsLocat.hostname;
      const protocol = XEUtilsLocat.protocol;

      window.location.href =
        protocol +
        "//" +
        hostName +
        ":7001/" +
        process.env.VUE_APP_DATA_IO_URI_PARAM +
        "/Template/downfile?alys_code=" +
        this.formSearchData.alys_code; //在本页面打开外部链接
    },
    handlePushExportUrlTemp() {
      const XEUtilsLocat = XEUtils.locat();
      const hostName = XEUtilsLocat.hostname;
      const protocol = XEUtilsLocat.protocol;

      window.location.href =
        protocol +
        "//" +
        hostName +
        ":7001/" +
        process.env.VUE_APP_DATA_IO_URI_PARAM +
        "/Template/downfileTemplate?alys_code=" +
        this.formSearchData.alys_code; //在本页面打开外部链接
    },
  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let token = store.getters.token || getToken();
    this.$set(this.uploadHeaders, "Authorization", token);

    this.findfindSingleTableTemplate();
    // 初始化表格字段
    // this.initTableCols()
    // 初始化表格数据
    // this.findList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}

.upload-demo {
  display: inline-block;
  margin: 0 15px;
  //   .el-button{
  //     box-sizing: border-box;
  //     outline: 0;
  //     margin: 0;
  //     -webkit-appearance: none;
  //     text-align: center;
  //     display: inline-block;
  //     line-height: 1;
  //     white-space: nowrap;
  //     cursor: pointer;
  //     background: #FFF;
  //     border: 1px solid #DCDFE6;
  //     font-size: 12px;
  //     border-radius: 3px;
  //     padding: 7px 15px;
  //     color: #606266;
  //     // background-color: #fff;
  //     // border-color: #dcdfe6;
  // }
}
</style>